import 'dart:ui';

import 'package:flutter/material.dart';
import 'dart:math';

import 'package:kasax/utils/img_utils.dart';

class ClipRRectDemo extends StatefulWidget {
  const ClipRRectDemo({Key? key}) : super(key: key);

  @override
  _ClipRRectDemoState createState() => _ClipRRectDemoState();
}

class Sky extends CustomPainter {
  @override
  void paint(Canvas c, Size s) {}

  @override
  bool shouldRepaint(Sky s) => false;
}

class _ClipRRectDemoState extends State<ClipRRectDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ClipRRect"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(15),
          child: Container(
            child: Column(
              children: [
                Image.network(
                  "https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg",
                  color: Color.fromRGBO(255, 255, 255, 0.5),
                  colorBlendMode: BlendMode.modulate,
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  height: 35,
                  width: double.infinity,
                  color: Colors.blue,
                  child: Center(
                    child: ShaderMask(
                      shaderCallback: (bounds) {
                        return RadialGradient(
                            radius: 1.0,
                            center: Alignment.topLeft,
                            tileMode: TileMode.mirror,
                            colors: [
                              Colors.yellow,
                              Colors.deepOrange.shade900
                            ]).createShader(bounds);
                      },
                      child: Text("I’m burning the memories"),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                SizedBox(
                  height: 200,
                  width: double.infinity,
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      Text('0' * 10000),
                      Center(
                        child: ClipRect(
                          // clips to the 200x200 [Container] below
                          child: BackdropFilter(
                            filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                            child: Center(
                              child: Text("hello world"),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  height: 200,
                  child: Card(
                    color: Colors.grey.shade500,
                    child: Center(
                      child: CustomPaint(
                        painter: Sky(),
                        child: Text(
                          "Once upon a time...",
                          style: TextStyle(
                              fontSize: 30,
                              color: Color(0xFFFFFFFF),
                              fontWeight: FontWeight.w400),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                ClipRect(
                  child: Align(
                    alignment: Alignment.topLeft,
                    heightFactor: 0.75, // 值越小，图片可见的部分就越小
                    child: Image.network(
                        "https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg"),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  color: Colors.blue,
                  child: Transform(
                    alignment: Alignment.topRight,
                    transform: Matrix4.skewY(0.3)..rotateZ(-pi / 12.0),
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      color: Color(0xFFE8581C),
                      child: Text("Apartment for rent!"),
                    ),
                  ),
                ),
                SizedBox(
                  height: 35,
                ),
                Container(
                  child: Transform.rotate(
                    angle: -pi / 12.0,
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      color: Color(0xFFE8581C),
                      child: Text("Apartment for rent!"),
                    ),
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  width: double.infinity,
                  color: Colors.green,
                  height: 65,
                  child: Transform.translate(
                    offset: Offset(0.0, 15.0),
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      color: Color(0xFF7F7F7F),
                      child: Text("Quarter"),
                    ),
                  ),
                ),
                SizedBox(
                  height: 25,
                ),
                Container(
                  width: double.infinity,
                  color: Colors.yellow,
                  height: 65,
                  child: Transform.scale(
                    scale: 0.5,
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      color: Color(0xFF7F7F7F),
                      child: Text("Bad Idea Bears"),
                    ),
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  width: 300,
                  height: 400,
                  color: Colors.red,
                  child: FittedBox(
                    child: Image.network(
                        "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg"),
                    fit: BoxFit.fill,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  child: RotatedBox(
                    quarterTurns: 3,
                    child: Text("Hello World!"),
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: Image.network(
                        "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg"),
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                ImageUtils.buildRoundImgByClipRRect(16 / 9, 12.0,
                    "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg")
              ],
            ),
          ),
        ),
      ),
    );
  }
}
